import React, { Component } from 'react'

export default class ComSon extends Component {
    constructor() {
        super();
        this.state = {
            age: 10086
        }
        console.log('1-constructor');
        this.fn1() // 能否调用组件中的函数
    }
    // derived 派生衍生  这个函数的作用是 根据Props获得一个衍生出来的state（根据props修改state）
    static getDerivedStateFromProps(p) {
        console.log('2-getDerivedStateFromProps');
        console.log('父组件传来的数据，props：', p);
        // if(条件) {
        //     return {
        //         xx: 'ffff'
        //     }
        // }else {
        //     return null
        // }
        // return { // 这个函的作用是修改state对象 或者合并新的数据到state中 返回null表示不修改
        //     age: 123456
        // }
        return null
     }
    fn1() {
        console.log(this.state.age);
    }
    componentDidMount() {
        // 发请求的代码放在这里
        console.log('4-componentDidMount');
    }
    // 数据变化后，页面是否更新？返回tf
    shouldComponentUpdate(p, s) {
        // 外因引起的数据更新-props
        // 内因引起的数据更新-state
        // 性能优化--有些时候即使数据更新了，但是不需要更新页面
        console.log('shouldComponentUpdate');
        console.log(this.props); // 老数据
        console.log(this.state); // 老数据
        console.log(p); // 新数据
        console.log(s); // 新数据
        // if(条件) {
        //     return true
        // }else {
        //     return false
        // }
        return true
    }
    // Snapshot 快照 记录某个时刻的数据 放在return中 传给componentDidUpdate
    getSnapshotBeforeUpdate() {
        let time = new Date();
        return {
            time: time.toLocaleDateString()
        }
    }
    componentDidUpdate(p, s, snapshot) {
        console.log('componentDidUpdate');
        console.log(p, s); // 页面已经更新结束 参数中返回了不容易获取的老数据
        console.log(this.props, this.state); // 页面已经更新结束 这都是新数据了
        console.log(snapshot);
    }
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    changeState() {
        this.setState({
            age: '9999'
        })
    }
    render() {
        console.log('3-render');
        return (
            <div>
                <p>我是子组件--我来演示生命周期钩子函数-{this.state.age}</p>
                <button onClick={()=>this.changeState()}>修改state</button>
            </div>
        )
    }
}
